<template>
    <div class="login">
        <img class="logo" src="//s.weituibao.com/1582958061265/mlogo.png" alt="" />
        <div v-if="type1 == 'login'" class="login-body login">
          <van-form @submit="onSubmit">
              <van-field
                  v-model="username"
                  name="username"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div class="verify">
                <div class="vef-box">
                  <CharacterVerification ref="RefLoginVerification" :width=136 :height="42"></CharacterVerification>
                </div>
                <input type="text" v-model="vef" class="vef-tx">
                <span class="vef-change" @click="RefLoginVerification?.refresh()">换一张</span>
              </div>
              <div class="link-register" @click="toggle('register')">立即注册</div>
              <van-button
                round
                block
                type="primary"
                color="#1baeae"
                native-type="submit"
                >登录
              </van-button>
          </van-form>
        </div>
        <div v-else class="login-body register">
          <van-form @submit="onSubmit">
            <van-field
                  v-model="username1"
                  name="username1"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                  v-model="password1"
                  type="password"
                  name="password1"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div class="verify">
              <div class="vef-box">
                <CharacterVerification ref="RefRegisterVerification"></CharacterVerification>
              </div>
              <input type="text" v-model="vef" class="vef-tx">
              <span class="vef-change"  @click="RefRegisterVerification?.refresh()">换一张</span>
            </div>
            <div class="link-login" @click="toggle('login')">已有登录账号</div>
            <van-button
              round
              block
              type ="primary"
              color="#1baeae"
              native-type="submit"
              >注册
            </van-button>
          </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
  import CharacterVerification from './Identify.vue'
  // 添加登录和注册接口
  import { login, register } from '../service/user.ts'
  // 本地存储函数
  import { setLocal, getLocal } from '../common/ts/util.ts'
  import { Toast } from 'vant'
  import { ref, onMounted } from 'vue'
  // import { getLogin } from '@/test11/request'
import { conditionalExpression } from '@babel/types'
  const type1 = ref<string>('login')
  const username = ref('')
  const password = ref('')
  const username1 = ref('')
  const password1 = ref('')
  const RefRegisterVerification = ref<InstanceType<typeof CharacterVerification>|null>(null)
  const RefLoginVerification = ref<InstanceType<typeof CharacterVerification>|null>(null)
  const vef = ref('')
  const verify = ref<boolean|undefined>(false) // 此变量判断验证码输入是否正确
  // 执行验证码
  function dealTriVer () {
    if (type1.value === 'login') {
      verify.value = RefLoginVerification.value?.validate(vef.value)
    } else {
      verify.value = RefRegisterVerification.value?.validate(vef.value)
    }
  }
  // 切换登录注册页面
  function toggle (value: string) {
    verify.value = false
    type1.value = value
  }
  // 提交处理
  async function onSubmit (values :any) {
    dealTriVer()
    if (!verify.value) {
      Toast.fail('验证码没填或者错误')
      return
    }
    if (type1.value === 'login') {
      const loginParams = JSON.stringify(
        {
        username: values.username,
        password: values.password
        })
      const result = await login(loginParams)
      console.log('@@@',result.data)
      if( result.code ==1000){
        setLocal('token', `Bearer ${result.data}`)
        window.location.href = '/'
      }else if( result.code ==1004){
        username.value = ''
        password.value = ''
        Toast.fail('用户名或密码错误')
      }
    } else {
      const registerParams = JSON.stringify(
        {
          username: values.username1,
          password: values.password1
        })
      const result = await register(registerParams)
      console.log(result)
      if( result.code == 1000){
        Toast.success('注册成功')
        type1.value = 'login'
      } else if( result.code ==10087){
        Toast.fail('请输入正确手机号')
      }else if (result.code ==1005){
        username1.value = ''
        password1.value = ''
        Toast.fail('该用户已存在')
      }
    }
  }
</script>

<style lang="less" scoped>
  .login{
    img.logo{
      width:120px;
      height:120px;
    }
    .logo{
      width: 170px;
      height: 60px;
      display: block;
      margin: 80px auto 0px;
    }
    .login-body{
      padding: 0 20px;
      .verify{
        margin-top:16px;
        width:100%;
        display: flex;
        .vef-box{
          width:136px;
          height:42px;
          border:1px solid #ddd;
        }
        .vef-tx {
          margin-left:10px;
          width: 100px;
          height: 38px;
          font-size: 20px;
          border:1px solid #ddd;
        }
        .vef-change{
          font-size:10px;
          padding-top: 13px;
          margin-left: 10px;
          color:#337ab7;
        }
      }
    }
    .login{
      .link-register {
        font-size: 14px;
        margin: 20px 0 20px;
        color: #1989fa;
        text-align:left;
      }
    }
    .register{
      .link-login {
        font-size: 14px;
        margin: 20px 0 20px;
        color: #1989fa;
        text-align: left;
      }
    }
 }
</style>